<template>
   <div>
       <header>
            <navigator open-type="switchTab" class="navigator" url="/pages/index/index">〈</navigator>
           <span>直播看房</span>
       </header>
       <div class="tap">
            <span v-for="(item,index) in list" 
                  :key="item"
                  :class="idx===index?'active':''"
                  @click="changeIndex(index)">{{item}}</span>      
        </div>
        <div class="list">
            <div v-for="item in items"
             :key='item.img'>
               <div class="list-img" >
                    <navigator @click="bus()">
                         <image :src="item.img" alt=""/>
                    </navigator>
               </div>
               <div class="list-bottom">
                   <div class="l-b-top">
                       <p>{{item.mas}}</p>
                   </div>
                  <div class="l-b-bottom">
                       <p>##</p>
                        <span>{{times}}</span>
                  </div>
               </div>
            </div>
        </div>
   </div>
</template>

<script>
export default {
    data() {
        return {
            list:['不限','正在直播','精彩回放'],
            imgs:[{
                img:"../../static/u858.png",
                mas:'心悦尚城！直播屋内精装格局',
                idx:0                
            },{
                img:"../../static/WeChat11.png",
                mas:'心悦尚城！直播屋内精装格局',
                idx:1
            },{
                img:"../../static/WeChat3.png",
                mas:'心悦尚城！直播屋内精装格局',
                idx:0
            }],
            items:[],
            idx:0,
            times:new Date(new Date()*1)
        }
    },
    created() {
        this.items=this.imgs
    },
    methods:{
        changeIndex(index){
            if(index===1){
                this.items=[]
                this.items.push(this.imgs[1])
            }else if(index===2){
                this.items=[]
                 this.items.push(this.imgs[0],this.imgs[2])
            }else{
                this.items=[]
                this.items=this.imgs
            }
            this.idx=index
            console.log(this.items)
        },
        bus(){
            wx.navigateTo({
                url:"/pages/broadcast/delect/index"
            })
        }
    }
}
</script>

<style lang='scss'>
header{
    width: 100%;
    height: 160rpx;
    background: linear-gradient(to right,#0000FF,#1E90FF);
    display: flex;
    .navigator{
        width: 30%;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
         padding-top:50rpx;
         font-size: 30rpx;
         color: white;
    }
    span{
        flex: 1;
        height: 60rpx;
        padding-top:50rpx;
        padding-left: 90rpx;
        line-height: 60rpx;
        font-size: 30rpx;
         color: white;
    }
}
.tap{
    width: 90%;
    height: 60rpx;
    margin: 0 auto;
   line-height: 60rpx;
   display: flex;
   margin-top: 40rpx;
   span{
       display: block;
       width: 20%;
       text-align: center;
       margin-left: 20rpx;
       background: #eee;
   }
}
.tap .active{
    color: #D87093;
    background:#FFEFD5;
    border: 1px solid #CD5C5C;
}
.list{
    width: 90%;
    margin: 0 auto;
    margin-top: 50rpx;
}
.list div{
    margin: 40rpx 0;
}
.l-b-bottom{
    display: flex;
    p{
        width: 200rpx;
        text-align: center;
    }
    span{
        flex: 1;
    }
}
</style>